import React, { useMemo, useState } from 'react'
import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, { Autoplay, Pagination } from 'swiper'
import styles from './index.less'

function Index({ data }) {
  const [mySwiper, setMySwiper] = useState()
  const [selectIndex, setSelectIndex] = useState(0)
  useMemo(() => {
    SwiperCore.use([Autoplay, Pagination])
  }, [])

  // const list = new Array(3).fill("1")
  return (
    <div className={styles.page}>

      <div className={styles.swiperBox}>
        <Swiper
          spaceBetween={0}
          slidesPerView={1}
          onSlideChange={(e) => {
            setSelectIndex(e.activeIndex)
          }}
          onSwiper={(swiper) => {
            setMySwiper(swiper)
            setSelectIndex(swiper.activeIndex)
          }}
        >
          {
            data && data.map((item, index) => {
              return <SwiperSlide key={index}>
                <div className={`${styles.swiperItem}`}>
                  <img src={item}></img>
                </div>
              </SwiperSlide>
            })
          }
        </Swiper>

        <div className={styles.Pagination}>
          {
            data && data.map((_, index) => {
              return <div
                className={`${styles.item} ${selectIndex == index && styles.selectItem}`}
                key={index}
                onClick={() => {
                  mySwiper.slideTo(index, 1000, false);
                }}>
                <img src={_} className={styles.pagIcon}></img>
              </div>
            })
          }
        </div>

      </div>

    </div>
  )
}

export default Index
